<template>
  <div>
	  <basic-container>
	    <ul class="tab_menu">
	      <li
	        v-for="(item, index) in tabMenuArr"
	        :key="`tabmenu_${index}`"
	        @click="tabChange(index)"
	       
	      >{{ item }}</li>
	    </ul>
	    <el-row>
	        <el-col :span='13'>
	            <el-form label-width="90px" >
	                <el-form-item label="项目编号: ">
	                    {{projectInfoData.number}}
	                </el-form-item>
	                <el-form-item label="项目名称: ">
	                    {{projectInfoData.name}}
	                </el-form-item>
	                <el-form-item label="项目时间: ">
	                    {{projectInfoData.startTime}} 至 {{projectInfoData.endTime}}
	                </el-form-item>
	                <el-form-item label="项目说明: ">
	                    {{projectInfoData.description}}
	                </el-form-item>
	    		</el-form>
	        </el-col>
	        <el-col :span='10' :offset="1" style="border-left:1px dotted #DCDFE6">
	            <div id="main" class="chart" ></div>
	            <div id="main1" class="chart" ></div>
	        </el-col>
	    </el-row>
	  </basic-container>
   
  </div>
</template>

<script>
// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

import { getStore } from '@/util/store'
import { getDataById } from "@/api/ledger/progect"
import { validatenull } from "@/util/validate.js"
export default {
  name: "",
  data() {
    return {
	  tabMenuArr: ["基本信息"],
      myChart:null,
      myChart1:null,
      projectId: getStore({ name: 'projectId'}),
      projectInfoData:{
          name:'',
          number:'',
          description:'',
          startTime:'',
          endTime:''
      },
      myChartData:{
          dengerousCount:0,
          dengerousData:[],
          consumablesCount:0,
          consumablesData:[]
      }
    }
  },
  mounted(){
      getDataById({id:this.projectId}).then(res =>{
          if(res.data.code == 200){

              if(Array.isArray(res.data.data)) {
                  this.projectInfoData = {
                      name: res.data.data[0].name,
                      number: res.data.data[0].number,
                      description: res.data.data[0].description,
                      startTime: res.data.data[0].startTime,
                      endTime: res.data.data[0].endTime
                  }
              } else {
                  this.projectInfoData = {
                      name: res.data.data.name,
                      number: res.data.data.number,
                      description: res.data.data.description,
                      startTime: res.data.data.startTime,
                      endTime: res.data.data.endTime
                  }
              }
              console.log(this.projectInfoData)

             if(!validatenull(res.data.data)){
                 res.data.data.forEach(item=>{
                     if(item.projectArticle.type==1){
                         this.myChartData.dengerousCount += item.projectArticle.quantity;
                         let dengerousData = {name:item.projectArticle.name,value:item.projectArticle.quantity}
                         this.myChartData.dengerousData.push(dengerousData);
                     } else if(item.projectArticle.type==0) {
                         this.myChartData.consumablesCount += item.projectArticle.quantity;
                         let dengerousData = {name:item.projectArticle.name,value:item.projectArticle.quantity}
                         this.myChartData.consumablesData.push(dengerousData);
                     }
                 })
                 this.myChart = echarts.init(document.getElementById('main'));
                 this.myChart.setOption(this.setOptionData('耗材投入数量'+this.myChartData.consumablesCount));
                 this.myChart1 = echarts.init(document.getElementById('main1'));
                 this.myChart1.setOption(this.setOptionData2('危险品投入数量'+this.myChartData.dengerousCount));
             }
          } else if(res.data.code == 400){
              this.exitLedger("该项目不存在！");
          } else {
              this.exitLedger("获取项目信息失败！");
          }
      })


  },
  methods: {
      //查询失败
      exitLedger(msg){
          this.$notify.error({ title: '查询失败', message: msg, type: 'danger', });
          setTimeout(() =>{
              this.$router.push({ path: '/projectManage/progectList' });
          },3000);
      },
      // 图表数据
      setOptionData(name){
          let option={
                title : {
                    text: name,
                    x:'center',
                    y:'bottom'
                },
                center: ['50%', '50%'],
                backgroundColor: "#ffffff",
                color: ["#919191", "#989898", "#a6a6a6", "#dbdbdb", "#bcbcbc"],
                series: [
                {   name: name,
                    type: 'pie',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    radius: ['0', '50%'],
                    startAngle: 0,
                    label: {
                        normal: {
                            formatter: '{b} : {c} | {d}%',
                            // formatter: '{c} | {d}%',
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: this.myChartData.consumablesData
                }
            ]
          }
          return option;
      },
      // 图表数据
      setOptionData2(name){
          let option={
              title : {
                  text: name,
                  x:'center',
                  y:'bottom'
              },
              center: ['50%', '50%'],
              backgroundColor: "#ffffff",
              color: ["#919191", "#989898", "#a6a6a6", "#dbdbdb", "#bcbcbc"],
              series: [
                  {   name: name,
                      type: 'pie',
                      center: ['50%', '50%'],
                      selectedMode: 'single',
                      radius: ['0', '50%'],
                      startAngle: 0,
                      label: {
                          normal: {
                              // position: 'inner',
                              formatter: '{b} : {c} | {d}%',
                              rich: {
                                  a: {
                                      color: '#999',
                                      lineHeight: 22,
                                      align: 'center'
                                  },
                              }
                          }
                      },
                      labelLine: {
                          normal: {
                              show: true
                          }
                      },
                      data: this.myChartData.dengerousData
                  }
              ]
          }
          return option;
      }
  }
};
</script>

<style scoped>
.chart {
  width: 500px;
  height: 350px;
  margin: 20px auto
}

ec-canvas {
  width: 100%;
  height: 100;
}
</style>